<template>
  <div class="footer blackWhite">
    <div class="footerLogo">
        <div class="MiLogo"><img src="../public//imgs/logo-footer.png" alt=""></div>
        <div class="miShop">小米商城</div>
    </div>
    <div class="xiaomiflex">
        <ul class="xiaomi">
            <li class="borderright left">小米<span>|</span></li>
            <li class="borderright left">MIUI<span>|</span></li>
            <li class="borderright left">米家<span>|</span></li>
            <li class="borderright left">密聊<span>|</span></li>
            <li class="borderright left">多看<span>|</span></li>
            <li class="borderright left">游戏<span>|</span></li>
            <li class="borderright left">政企服务<span>|</span></li>
            <li class="left">小米天猫店</li>
        </ul>
        <div class="clear"></div>
    </div>
    
    <div class="BEAN">© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</div>
  </div>
</template>

<script>
export default {

}
</script>

<style scope>
    .footer{
        background: #333333;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    .footerLogo .MiLogo img{
        width: 40px;
        margin: 20px 0 10px;

    }
    .miShop{
        margin-bottom: 10px;
    }
    .xiaomiflex{
        width: 100%;
        position: relative;
        margin-bottom: 12px;
    }
    .xiaomi{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .xiaomi span{
        margin: 0 5px;
    }
    .BEAN{
        padding-bottom: 5px;
    }
</style>